<template>
	<!-- 立即下单页面 -->
	<view class="orderNow">
		<!-- 头部 -->
		<view class="orderNow-head">
			<view class="search">
				<view class="search-box" @tap="inAddress">
					<image class="search-icon" src="../../static/images/tabbar/position.png" mode=""></image>
					<view v-if="addressDetail==''">
						<view class="search-inputNull">请添加上门地址</view>
					</view>
					<view class="search-input" v-else>
						<view class="search-userinfo">
							<view class="username">{{addressDetail.consignee}}</view>
							<view class="phon">{{addressDetail.consignee_phone}}</view>
						</view>
						<view class="address">{{addressDetail.location}}{{addressDetail.detail}}</view>
					</view>
					<view class="search-arrow">
						<image src="../../static/images/tabbar/rightArrow.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="orderNow-main">
			<!-- 如果未选择任何类型 -->
			<view class="nature" v-if="classId==0">
				<view class="nature-top">
					<view class="nature-title">选择下单类型</view>
					<view class="nature-icon">
						<view class="natureImg" v-for="(item,index) in natureArr" :key="index"
							@tap="clickNature(index,item)">
							<image :class="itemIndex==index?'ImageBig':''" :src="item.pic_url" mode="widthFix"></image>
						</view>
					</view>
					<view class="nature-data" v-if="itemIndex!=-1">
						<view class="natureData-name">{{natureData.name}}</view>
						<view class="natureData-price">今日预估:{{natureData.children[0].user_price}}/KG</view>
					</view>
				</view>
			</view>
			<!-- 预约时间、上传照片 -->
			<view class="reservation">
				<!-- 时间日期选择器 -->
				<view class="reservation-title">
					<picker mode="multiSelector" @columnchange="sildeDataChange" @change="onDateChange"
						:range="dataTimeList" :value="dataTimeIndex" class="multiPicker">
						<view class="picker">
							<view class="reservationTime">预约时间</view>
							<view :class="currentDate=='请选择'?'reservationSelect':'reservationData'">{{ currentDate }}
							</view>
							<view class="reservation-img">
								<image src="../../static/images/tabbar/rightArrow.png" mode=""></image>
							</view>
						</view>
					</picker>
				</view>
			</view>
			<!-- 上传照片 -->
			<view class="reservation-unloadImg">
				<view class="text">
					<text class="text-title">上传照片</text>
					<text class="text-content">(请上传照片，每张4mb以内，最多上传3张)</text>
				</view>
				<view class="uploadbox">
					<upLoadImg ref="clearn" @choiceImg="choice"></upLoadImg>
				</view>
			</view>
			<view class="tip">
				<!-- <view class="weight">重量</view> -->
				<view class="chick" @tap="TipChick">
					<image v-if="showTip" src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/checkbox.png" mode=""></image>
				</view>
				<view class="tip-text">>10斤
					<text class="pay">注：物品小于10斤暂不上门回收</text>
				</view>
			</view>
			<!-- 官方客服 -->
			<view class="reply">
				<text>官方客服：</text>
				<text class="replyPhone">{{phon}}</text>
			</view>
			<!-- 免责协议 -->
			<view class="agreement">
				<view class="agreement-main">
					<view class="agreement-top">
						<view :class="ischeck?'':'showCheck'" @tap="checkTap">
							<image v-show="ischeck" src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/checkbox.png" mode=""></image>
						</view>
						<view class="agreementName" @tap="showPop">免责协议名称</view>
					</view>
					<button class="appointment" @tap="shortOrder">立即预约</button>
				</view>
			</view>
			<!-- 弹出框(协议弹框) -->
			<popup v-show="isPopup" :popEvent="popData" :isPopup="isPopup" @changeData="hidePopup" openRouter="protocol"></popup>
		</view>
	</view>
</template>

<script>
	import util from '@/component/commen/api/util.js';
	import none from "@/otherPages/none/none.vue"
	import upLoadImg from "@/component/uploadImg.vue"
	import popup from "@/component/popup.vue" //协议弹出框
	export default {
		components: {
			none,
			popup,
			upLoadImg
		},
		data() {
			return {
				natureArr: [], //回收的类型
				itemIndex: -1, //图片放大
				natureData: {}, //图片底下显示的数据
				showNumberBox: true, //显示数据
				currentDate: "请选择",
				dataTimeList: [], //时间日期选择内容
				dataTimeIndex: [0, 0], //默认选择的索引值
				dataTileChildren: [], //时间选择内容
				phon: "", //客服电话
				ischeck: false, //是否点击选项框
				isPopup: false,
				addressDetail: "", //地址
				classList:[],//分类
				classId:0,//点击进来的分类id，若未选择则id为0
				imgUrl:"",//选择的拼接后的图片地址
				typeId:0,//默认类型id
				showTip:false,//选中是否大于5kg
				popData:"",//协议内容
			};
		},
		onShow() {
			this.getNature()
			this.getAddress()
			this.getpopContent()
		},
		onLoad(e) {
			const classListString = decodeURIComponent(e.classList);
			console.log(JSON.parse(classListString))
			this.classList = JSON.parse(classListString)
			console.log("点击进入的分类id",e.classId)
			this.classId = e.classId
			this.typeId = e.classId
			// this.natureArr = res.data
			// this.natureData = this.natureArr[0]
		},
		mounted() {
			let _this = this
			uni.getStorage({
				key: "phon",
				success(res) {
					// console.log(res)
					_this.phon = res.data
					// console.log("客服电话：",_this.phon)
				}
			})
		},
		methods: {
			getAddress() { //获取默认地址
				// ?i=2&t=0&v=2.7.4&from=wxapp&c=entry&a=wxapp&do=address&m=wjyk_recycle&sign=af6fa483102e7451f094e335cf3ab466&uid=2
				var params = {
					do:"address",
					op:"getDefault",
					uid:uni.getStorageSync("uid")
				}
				util.requestWithSign(params).then(res=>{
					console.log("默认地址：",res)
					this.addressDetail = res.data
					// res.data.forEach((item) => {
					// 	if (item.is_default == 1) {
					// 		this.addressDetail = item
					// 	}
					// })
				})
			},
			getpopContent(){//获取协议内容
				var params = {
					do:"system"
				}
				util.requestWithSign(params).then(res=>{
					console.log("协议内容：",res)
					this.popData = res.data.user_protocol
				})
			},
			onDateChange(e) { //日期选择
				console.log("日期选择：", e)
				//日期
				var index1 = e.detail.value[0]
				var a = this.dataTimeList[0][index1]
				// 时间
				var index2 = e.detail.value[1]
				var b = this.dataTimeList[1][index2]
				this.currentDate = a + "   " + b
				console.log(this.currentDate)
			},
			sildeDataChange(e) { //滑动日期选择触发
				console.log(e)
				if (e.detail.column === 0) { //滑动第一列
					let index = e.detail.value
					let timeOptions = this.dataTileChildren[index] //第二列
					this.$set(this.dataTimeList, 1, timeOptions); // 更新第二列选项
					this.dataTimeIndex[1] = 0 //让第二列选项回到第一行
					this.$forceUpdate() //实例重新渲染页面
				}
			},
			choice(value){//获取子组件传递过来的图片地址
				console.log("子组件传递过来的选择的图片的地址：",value)
				this.imgUrl = value.join(",")
				console.log(this.imgUrl)
			},
			getNature() { //获取下单分类数据
				var params = {
					do: "reserve",
					op: "cateList",
				}
				util.requestWithSign(params).then(res=>{
					console.log("下单分类数据",res)
					this.natureArr = res.data
					this.natureData = this.natureArr[0]
				})
				var paramTime = {
					do:"reserve",
					op:"timeList",
				}
				util.requestWithSign(paramTime).then(res=>{
					console.log("时间：",res)
					let dataTime = res.data.map(item => {
						return item.name
					})
					this.dataTileChildren = res.data.map(item => {
						return item.children
					})
					this.dataTimeList = [dataTime, this.dataTileChildren[0]]
		
				})
			},
			clickNature(index, imgData) {
				console.log(index,imgData)
				// 点击后全屏显示图片
				// let arr=[];
				//   arr.push(imgsArray.pic_url)
				//   console.log(arr,'图片的地址')
				//   uni.previewImage({
				//        current: 0,
				//        urls: arr //必须是网址路径，否则加载不出来，如：http：或https：
				//   });
				this.typeId = imgData.id
				this.itemIndex = index
				this.natureData = imgData
			},
			TipChick(){//点击>10斤
				this.showTip = !this.showTip
			},
			showPop() { //点击用户协议名称，显示弹出框
				this.isPopup = true
			},
			hidePopup(e) { //关闭遮罩，子组件传递数值
				// console.log(e)
				// 子组件传递false过来，关闭弹框
				this.isPopup = e
			},
			inAddress() { //点击进入地址管理
				uni.navigateTo({
					url: "/otherPages/address-management/address-management"
				})
			},
			checkTap(){//点击选择协议
				this.ischeck = !this.ischeck
				console.log(this.typeId)
			},
			shortOrder(){//点击立即预约
				if(this.typeId==0){
					console.log("没有选择类型")
					return uni.showToast({
						title:"请选择下单类型！",
						icon:"none"
					})
				}
				if(!this.addressDetail){
					return uni.showToast({
						title:"请选择地址！",
						icon:"none"
					})
				}
				// console.log(this.currentDate)
				if(this.currentDate=="请选择"){
					return uni.showToast({
						title:"选择时间！",
						icon:"none"
					})
				}
				if(!this.showTip){
					return uni.showToast({
						title:"小于10斤暂不上门回收！",
						icon:"none"
					})
				}
				if(!this.ischeck){
					return uni.showToast({
						title:"查看并勾选协议！",
						icon:"none"
					})
				}
				var params = {
					do: "reserve",
					op: "addOrder",
					uid: this.addressDetail.uid,//用户id
					addressid: this.addressDetail.id,//地址id
					partnerid: this.addressDetail.flag,//合伙人、id
					content: [],//内容
					reservetime: this.currentDate,//时间
					type: this.typeId,//类型id
					interval:"",//回收间隔
					pic_url:this.imgUrl,//选择的图片
				}
				util.requestWithSign(params).then(res=>{
					console.log("预约下单结果",res)
					uni.showToast({
						title:"预约成功"
					})
					// 清除之前选择的数据
					this.currentDate = ""
					this.$refs.clearn.clearn("")
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.orderNow {
		padding-bottom: 20rpx;

		// 头部部分
		.orderNow-head {
			width: 100%;
			// height: 270rpx;
			background: #00b388;
			// border: 1px solid #f00;
			// border-radius: 0 0 80rpx 80rpx;
			padding-top: 20rpx;
			padding-bottom: 40rpx;

			.search {
				.search-box {
					display: flex;
					align-items: center;
					padding: 20rpx 10rpx;
					width: 95%;
					// border: 1px solid #ccc;
					background: #fff;
					border-radius: 20rpx;
					margin: 0 auto;

					.search-icon {
						width: 34rpx;
						height: 34rpx;
						margin: 0 20rpx;
					}

					.search-input {
						flex: 1;
						// border: none;
						outline: none;

						.search-userinfo {
							display: flex;
							font-size: 26rpx;
							font-weight: bold;

							.username {
								margin-right: 20rpx;
							}
						}

						.address {
							font-size: 26rpx;
							color: #c5c5c5;
						}
					}

					.search-inputNull {
						flex: 1;
						font-size: 28rpx;
						color: #c5c5c5;
					}
					.search-arrow {
						margin-left: auto;
						// border: 1px solid #f00;
						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}
		}

		// 主体部分
		.orderNow-main {
			// border: 1px solid #f00;
			// margin-top: -80rpx;
			padding: 0 30rpx;
			// 下单类型
			.nature {
				.nature-top {
					box-sizing: border-box;
					margin-top: 20rpx;
					// height: 200rpx;
					width: 100%;
					border-radius: 10rpx;
					background: #fff;
					padding: 20rpx 30rpx;
					.nature-title{
						font-weight: bold;
						font-size: 30rpx;
					}
					// 图片
					.nature-icon {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						width: 100%;
						// border: 1px solid #f00;
						// width: 20%;
						margin-top: 30rpx;
						.natureImg{
							margin-top: 10rpx;
							width: 30%;
							// border-top: 1px solid #000;
							image {
								width: 100%;
								// height: 100%;
								// height: 100rpx;
								transition: transform 0.3s;
							}
							.ImageBig {
								//点击后图片放大
								// border: 2rpx solid #00b388;
								border-radius: 10rpx;
								transform: scale(1.1);
							}
						}
					}
					// 数据
					.nature-data {
						display: flex;
						justify-content: space-between;
						margin: 30rpx 0;
						font-size: 26rpx;
						align-items: center;

						.natureData-name {}

						// 价格
						.natureData-price {
							color: #00b388;
						}

						.natureData-add {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}

			// 预约时间
			.reservation {
				width: 100%;
				margin-top: 20rpx;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				background: #fff;
				border-radius: 10rpx 10rpx 0 0;
				border-bottom: 2rpx solid #f7f7f7;
				.reservation-title {
					.picker {
						font-size: 28rpx;
						display: flex;
						align-items: center;
						// justify-content: space-between;
						width: 100%;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						background-color: #fff;
						border-radius: 8rpx;

						.reservationTime {
							// width: 30%;
							// border: 1px solid #f00;
							font-size: 30rpx;
							font-weight: bold;
							margin-right: 40rpx;
							text-align: left;
						}

						.reservationSelect {
							//请选择
							color: #808080;
							// width: 20%;
							// border: 1px solid #f0f;
							text-align: left;
						}

						.reservationData {
							//选择时间后
							color: #000;
							text-align: left;
						}

						.reservation-img {
							// width: 50%;
							margin-left: auto;
							text-align: right;

							// border:1px solid #000;
							image {
								width: 26rpx;
								height: 26rpx;
							}
						}
					}
				}
			}
			// 上传照片
			.reservation-unloadImg {
				padding: 20rpx;
				box-sizing: border-box;
				background: #fff;
				border-radius: 0 0 10rpx 10rpx;
				.text {
					.text-title {
						font-size: 30rpx;
						font-weight: bold;
					}
			
					.text-content {
						font-size: 26rpx;
						color: #888888;
					}
				}
			}
			// 提示
			.tip{
				display: flex;
				padding: 20rpx;
				box-sizing: border-box;
				background: #fff;
				.weight{
					font-size: 30rpx;
					font-weight: bold;
					margin-right: 20rpx;
				}
				.chick{
					width: 40rpx;
					height: 40rpx;
					background: #f0f0f0;
					border: 2rpx solid #f0f0f0;
					border-radius: 10rpx;
					margin-right: 20rpx;
					image{
						width: 100%;
						height: 100%;
						
					}
				}
				.tip-text{
					.pay{
						margin-left: 20rpx;
						display: inline-block;
						color: #f00;
						font-size: 25rpx;
					}
				}
			}
			// 官方客服
			.reply {
				margin-top: 20rpx;
				font-size: 27rpx;
				color: #f00;

				.replyPhone {
					text-decoration: underline;
				}
			}

			// 免责协议
			.agreement {
				width: 100%;
				margin: 20rpx 0;

				.agreement-main {
					.agreement-top {
						margin-bottom: 20rpx;
						display: flex;
						justify-content: center;
						// align-items: flex-end;
						// border: 1px solid #f00;
						height: 38rpx;

						.showCheck {
							width: 33rpx;
							height: 33rpx;
							padding: 0;
							background: #fff;
							border-radius: 4rpx;
							border: 2rpx solid #d9d9d9;
						}

						image {
							width: 33rpx;
							height: 38rpx;
							margin: 0;
						}

						.agreementName {
							color: #00b388;
							font-size: 28rpx;
							text-decoration: underline;
						}
					}

					.appointment {
						background: #00b388;
						color: #fff;
						width: 40%;
						font-size: 29rpx;
					}
				}
			}
		}
	}
</style>